<template>
	<div>
		<Card>
			<label class="myLabel">角色：</label>
			<Select v-model="role" style="width:200px" @on-change="selectRole">
				<Option v-for="item in roleList" :value="item.value" :key="item.name">{{item.value}}</Option>
			</Select>
			<label class="myLabel"  v-show="show">应用分组：</label>
			<Select v-model="name" style="width:200px" @on-change="getList()" v-show="show">
				<Option v-for="item in nameList" :value="item.metadata.name" :key="item.metadata.name">{{ item.metadata.name }}</Option>
			</Select>
			<Table :columns="columns" :data="tableData" style="margin-top: 30px;"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				columns: [
					{
						title: '名称',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '角色类型',
						key: 'kind'
					},
					{
						title: '命名空间',
						key: 'metadata',
						render: (h, params) => {
							if (params.row.metadata.namespace !== undefined) {
								return h('div', params.row.metadata.namespace)
							} else {
								return h('div', '所有分组')
							}
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						render: (h, params) => {
							var date1 = new Date(params.row.metadata.creationTimestamp).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
							return h('span', date2)
						}
					}
				],
				tableData: [],
				timer: {},
				// 角色
				role: 'ClusterRole',
				// 角色集合
				roleList: [
					{
						name: '集群管理员',
						value: 'ClusterRole'
					},
					{
						name: '普通角色',
						value: 'Role'
					}
				],
				// 命名空间
				name: '',
				// 命名空间列表
				nameList: [],
				show: false,
				count: 0,
				pageSize: 5,
				myData: []
			}
		},
		methods: {
			// 命名选择的命名空间
			getList () {
				this.$api.get(0, '/kuber/v2/k8s/apps/role?type=' + this.role + '&nameSpace=' + this.name, {}, r => {
					if (r.data.code === 0) {
						this.myData = r.data.data.items
						this.count = this.myData.length
						this.getListByPage(1)
					}
				})
				this.timer = setInterval(() => {
					this.$api.get(0, '/kuber/v2/k8s/apps/role?type=' + this.role + '&nameSpace=' + this.name, {}, r => {
						if (r.data.code === 0) {
							this.myData = r.data.data.items
							this.count = this.myData.length
							this.getListByPage(1)
						}
					})
				}, 5000)
			},
			selectRole (data) {
				if (data === 'ClusterRole') {
					this.show = false
					this.name = ''
				} else {
					this.show = true
				}
			},
			// 分页
			handlePage (page) {
				this.getListByPage(page)
			},
			// 根据页码获取数据
			getListByPage (page) {
				this.tableData = []
				for (let i = 0; i < this.pageSize; i++) {
					if (this.myData[i + (page - 1) * this.pageSize] !== undefined) {
						this.tableData.push(this.myData[i + (page - 1) * this.pageSize])
					}
				}
			}
		},
		mounted () {
			// 命名空间列表
			this.$api.get(0, '/kuber/v2/k8s/nameSpace', {}, r => {
				this.nameList = r.data.data.items
			})
			this.getList()
		},
		destroyed () {
			let my = this
			window.clearInterval(my.timer)
		}
	}
</script>

<style>
	label.myLabel {
		width: 120px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}
	label.myLabel span{
		font-size: 12px;
		color: #ddd
	}
	div.form-div {
		margin-bottom: 15px;
	}
</style>
